
/**
 * Created by Administrator on 2017/10/19.
 */
import React from 'react';
import ImgShare from 'assets/img/share.png';
import ImgQues from 'assets/img/ques.png';
import ImgMusic from 'assets/img/music.png';
import bgm from 'assets/music/BGM.mp4';
import css from './index.less';


export default class TopBar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      musicPlay: false
      // userData: {nick: '', avatar: '', role: 1, score: 12},
    };
  }

  share() {

    Tida.share({
      title: '天猫双11，夜探紫禁城',
      content: '天猫双11，夜探紫禁城！天猫双11，夜探紫禁城！',
      url: '//sxtest.ews.m.jaeapp.com/hd/titatest/index.html',
      image: '//img.alicdn.com/bao/uploaded/i2/TB1Ra9zRpXXXXaYaXXXXXXXXXXX_!!0-item_pic.jpg',
      // 'targets': [0, 1, 2, 3, 4, 5, 6, 7],
      // 'weixinAppId': '',
      // 'weixinMsgType': 'image',
      // 'isAliUrl': true
    }, function(data) {
      console.log('share', data);
    });
  }

  music() {
    console.log(111);
    // 加入购物车
    // Tida.cart({
    //   sellerNick: '盛夏测试店铺',
    //   itemId: '559964345943',
    //   skuId: '73068526031'
    // }, function(data) {
    //   console.log(data);
    // });

    // const { musicClick = () => {} } = this.props;
    // musicClick();
    if (this.state.musicPlay){
      this.musicPaused();
    } else {
      this.musicPlay();
    }

  }


  // musicPicture() {
  //   const { isMusic } = this.props;
  //   if (isMusic == true) {
  //     this.refs.bgm.paly();
  //   } else if (isMusic == false) {
  //     this.refs.bgm.pause();
  //   }
  // }

  musicPlay() {
    this.refs.bgm.play();
    this.setState({
      musicPlay: true
    });
  }

  musicPaused() {
    this.refs.bgm.pause();
    this.setState({
      musicPlay: false
    });
  }

  componentDidMount() {
    this.musicPlay();
  }

  ques() {
    console.log(111);
    const { quesClick = () => {} } = this.props;
    quesClick();
  }

  render() {
    const { opa, isMusic } = this.props;
    const { musicPlay } = this.state;
    const props = {
      className: css.topBar,
      style: {
        opacity: `${opa}`,
      }
    };
    return (
    <div {...props}>
      <img src={ImgShare} onClick={() => {
        this.share();
      }} />
      <div onClick={() => {this.music(); }}>
        <audio src={bgm} ref="bgm" />
        { musicPlay ? <img src={ImgMusic}/> : <img src={ImgQues}/>}
        {/*{ this.musicPicture() }*/}
        {/*{ this.musicPicture()}*/}
      </div>
      <img src={ImgQues} onClick={() => {
        this.ques();
      }} />


    </div>


    );
  }
}
